<template>
  <div>
    <van-nav-bar title="城市列表" left-arrow />
    <van-index-bar>
      <van-index-anchor index="#">当前城市</van-index-anchor>
      <van-cell title="杭州" />

      <van-index-anchor index="热">热门</van-index-anchor>
      <van-cell
        v-for="item in hotCity"
        :key="item.value"
        :title="item.label"
        @click="$router.push('/index/' + item.label)"
      />

      <div v-for="(item, index) in indexList" :key="index">
        <van-index-anchor :index="item" />
        <van-cell
          v-for="(item, index) in filterCity(item)"
          :key="index"
          :title="item.label"
        />
      </div>
    </van-index-bar>
  </div>
</template>

<script>
import { city, hotCity } from '@/api/area'
export default {
  async created() {
    const { body } = await city()
    this.city = body

    const { body: hot } = await hotCity()
    this.hotCity = hot
  },
  data() {
    return {
      city: [],
      hotCity: [],
      indexList: [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ]
    }
  },
  methods: {
    filterCity(it) {
      return this.city.filter(
        (item) => item.pinyin.slice(0, 1).toUpperCase() === it
      )
    }
  }
}
</script>

<style scoped lang="less"></style>
